<!--  -->
<template>
  <div class="evaluation">
    <Nav title="评价">
      <template v-slot:left>
        <span class="back" @click="$router.back()"></span>
      </template>
    </Nav>
    <div class="evaluation_con">
      <div class="evaluation_con_top show_public">
        <div class="evaluation_con_title flex justify-center aligin-center pt-12">
          <img src="../../assets/imgs/share-order@3x.png" alt="">
          <span class="f-15 f-bold">发表评价</span>
        </div>
        <div class="evaluation_con_star flex justify-center">
          <van-rate v-model="value" :size="24" color="#f44" gutter="13"/>
        </div>
      </div>
      <div class="evaluation_con_btm show_public mt-16">
        <cube-textarea :maxlength="maxlength" v-model="evaluation" :placeholder="placeholder"></cube-textarea>
        <van-uploader
          class="mt-18 ml-14"
          v-model="fileList"
          multiple
          :max-count="3"
          :after-read="afterRead"
        />
      </div>
    </div>
    <div class="evaluation_foot">
      <button
        class="evaluation_btn btn_public flex justify-center aligin-center"
        @click="confirm"
      >确定</button>
    </div>
  </div>
</template>

<script>
import Nav from "../../components/Nav";
import { imageUpload, evaluate } from "../../api/api";
import axios from "axios";
import config from "../../utils/config";
import compress from "../../utils/picCompress";
export default {
  components: { Nav },
  data() {
    return {
      value: 5,
      evaluation: "", //评价
      maxlength: 200,
      placeholder: "请输入您的评价~",
      fileList: []
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 上传图片
    afterRead(file) {
      compress(file)
        .then(_file => {
          let formData = new FormData();
          formData.append("img", _file);
          return axios.post(config.baseUrl + "/api/image/upload", formData, {
            headers: {
              authorization: "bearer " + this.$store.state.token
            }
          });
        })
        .then(({ data: { result } }) => {
          this.fileList.splice(this.fileList.length - 1, 1, {
            url: result.url
          });
        })
        .catch(err => {});
    },
    // 提交
    confirm() {
      let imgs = this.fileList.map(item => {
        return item.url;
      });
      let params = {
        order_no: this.$route.params.id,
        scores: this.value
      };
      this.evaluation && this.$set(params, "content", this.evaluation);
      imgs.length && this.$set(params, "image", JSON.stringify(imgs));
      evaluate(params).then(res => {
        this.$router.back();
      });
    }
  },
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../../assets/style/mixin.less");
//@import url(); 引入公共css类

.evaluation_con_title img {
  width: 24px;
  height: 24px;
  padding-right: 9px;
}
.evaluation_con_star {
  padding: 16px 0 19px;
}
.evaluation_con_btm /deep/ .cube-textarea-wrapper {
  height: 175px;
}
.evaluation_con_btm /deep/ .cube-textarea-indicator {
  display: none;
}
.evaluation_foot {
  margin: 32px 15px 0;
}
</style>